<template>
  <div class="message-container">
    <el-form
      :inline="true"
      :model="queryData"
      size="small"
      ref="queryData"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6" v-if="authUser">
          <el-form-item label="油企名称" prop="enterpriseId">
            <el-select
              placeholder="请选择油企"
              v-model="queryData.enterpriseId"
              style="width: 190px"
            >
              <el-option
                v-for="item in enterpriseList"
                :key="item.enterpriseId"
                :label="item.enterpriseName"
                :value="item.enterpriseId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="推送渠道" prop="pushChannel">
            <el-select
              v-model="queryData.pushChannel"
              placeholder="请选择推送渠道"
              style="width: 190px;"
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRangeCreatedDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="resetQuery"
          size="mini"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          :disabled="authUser"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDeleteAll"
          :disabled="authUser"
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-table
      style="width: 100%"
      :data="msgList"
      ref="orderTable"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="油企名称" align="left" prop="enterpriseName" />
      <el-table-column
        label="推送渠道"
        align="left"
        prop="pushChannel"
        :formatter="pushChannelFormatter"
      />
      <el-table-column label="创建时间" align="left" prop="createdTime" />
      <el-table-column label="创建人" align="left" prop="createdBy" />
      <el-table-column
        label="最近一次修改时间"
        align="left"
        prop="updatedTime"
      />
      <el-table-column label="操作" align="left">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleView(scope.row)"
            size="mini"
            style="margin: 0px 5px"
            >查看</el-button
          >
          <el-button
            type="text"
            @click="handleEdit(scope.row)"
            size="mini"
            style="margin: 0px 5px"
            :disabled="authUser"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="fr"
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <msgForm :parm="params" @success-data="getData" />
  </div>
</template>
<script>
import { enterpriseList } from "@/api/station/order";
import {
  wxMessageTemplatePage,
  wxMessageTemplateDelAll,
  wxMessageTemplateDetails,
} from "@/api/message/template-msg";
import msgForm from "./msg-form.vue";
export default {
  components: { msgForm },
  data() {
    return {
      queryData: {},
      dateRangeCreatedDate: [],
      enterpriseList: [],
      channelList: [
        {
          key: "微信",
          value: "1",
        },
        // {
        //     key: '支付宝',
        //     value: '2'
        // },
        // {
        //     key: 'App',
        //     value: '3'
        // }
      ],
      msgList: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      selectionList: [],
      params: {},
    };
  },
  methods: {
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    getData() {
      if (this.loading) return;
      this.loading = true;
      let queryData = this.getQueryData(this.queryData);
      this.addDateRange(queryData, this.dateRangeCreatedDate);
      queryData = Object.assign(
        {
          page: this.page,
          pageSize: this.pageSize,
        },
        queryData
      );
      wxMessageTemplatePage(queryData).then((res) => {
        if (res && res.code === 200) {
          this.msgList = res.rows;
          this.total = res.total;
        } else {
          this.msgList = [];
          this.total = 0;
        }
      });
      this.loading = false;
    },
    getQueryData(data) {
      let queryData = data;
      Object.keys(queryData).forEach((key) => {
        if (queryData[key] === "" || queryData[key] === undefined) {
          queryData[key] = null;
        }
      });
      return queryData;
    },
    handleQuery() {
      this.getData();
    },
    resetQuery() {
      this.$refs["queryData"].resetFields();
      this.dateRangeCreatedDate = [];
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    handleSelectionChange(selection) {
      this.selectionList = selection;
    },
    handleAdd() {
      this.params = {
        drawerType: "new",
        drawerShow: true,
        enterpriseList: this.enterpriseList,
        channelList: this.channelList,
        msgData: null,
      };
    },
    handleEdit(row) {
      let data = {};
      wxMessageTemplateDetails(row.enterpriseId).then((res) => {
        if (res && res.code === 200) {
          data = res.data;
        }
        this.params = {
          drawerType: "edit",
          drawerShow: true,
          enterpriseList: this.enterpriseList,
          channelList: this.channelList,
          msgData: data,
        };
      });
    },
    handleView(row) {
      let data = {};
      wxMessageTemplateDetails(row.enterpriseId).then((res) => {
        if (res && res.code === 200) {
          data = res.data;
        }
        this.params = {
          drawerType: "read",
          drawerShow: true,
          enterpriseList: this.enterpriseList,
          channelList: this.channelList,
          msgData: data,
        };
      });
    },
    handleDeleteAll() {
      if (this.selectionList.length === 0) {
        return this.$message.warning("请选勾选需要删除的模版！！！");
      }
      this.$confirm(`确认删除勾选的模版吗？`).then(() => {
        let enterpriseIds = this.selectionList.map((item) => item.enterpriseId);
        wxMessageTemplateDelAll(enterpriseIds).then((res) => {
          if (res && res.code === 200) {
            this.$message.success(res.msg);
            this.selectionList = [];
            this.getData();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    pushChannelFormatter(row, column) {
      const types = {
        1: "微信",
        2: "支付宝",
        3: "App",
      };
      return types[row.pushChannel] ?? "";
    },
  },
  created() {
    this.getEnterpriseList();
    this.getData();
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.message-container {
  padding: 20px;
}
</style>
